<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒模型</title>
		<style type="text/css">
			.div1{
				border: 10px solid red;
				
				/*分别给边框设置不同的宽度*/
				border-top-width: 20px;
				border-bottom-width: 15px;
				border-left-width: 26px;
				border-right-width: 50px;
				
				width: 100px;
				height: 200px;
				background-color: blue;
				/*内边距*/
				/*padding: 20px;*/
				
				/*设置上下左右不同的内边距*/
				padding-top: 5px;
				padding-bottom: 12px;
				padding-left: 30px;
				padding-right: 19px;
				
				/*外边距*/
				/*margin: 30px;*/
				
				/*设置不同的外边距*/
				margin-top: 16px;
				margin-bottom: 78px;
				margin-left: 18px;
				margin-right: 50px;
				display: inline-block;
			}
			.div2{
				background-color: lawngreen;
				width: 300px;
				height: 500px;
				border: 1px dotted hotpink;
				margin-top: 100px;
				display: inline-block;
				margin-left: 100px;
			}
			.div3{
				width: 0;
				height: 0;
				/*transparent   边框颜色  透明*/
				border: 100px solid transparent;
				border-right-color: red;
				border-bottom-color: blue;
				border-left-color: greenyellow;
				border-top-color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- 总结：盒模型
		* 网站中的所有标签都符合盒模型原理；
		* 盒模型的组成：content  (width + heith) + padding + border + margin；
		* padding 盒子的内边距，相当于填充物；
		* border 盒子的边框，可以设置样式；
		* margin 盒子的外边距，主要用来设置不同标签之间的间距；
		* 盒子的实际大小：content （width + heith） + padding + border；
		* 如果标签和标签之间纵向分布，当都设置外边距时，则取两者的最大值作为边距；
		* 如果标签与标签之间横向分布，当都设置外边距时，则取两者间距的和作为边距； -->
		<div class="div1">
			
		</div>
		<div class="div2"></div>
		<div class="div3"></div>
	</body>
</html>
